<template>
    <div>
        <div>
            <Row>
                <Col span="5">
                    <Form :label-width="80">
                        <FormItem label="字典KEY" prop="name">
                            <Input class="ipt" placeholder="关键字KEY" v-model="keyword"/>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="4">
                    <Button type="primary" style="margin-left: 5px;" @click="getData">搜索</Button>
                </Col>
            </Row>
        </div>
        <Table :columns="columns" :data="data1" class="table" stripe/>
        <div style="text-align: right">
            <router-link to="/core/addCode">
                <Button class="add" icon="plus-round" style="margin-top: 5px" shape="circle" type="primary" v-has="this.$res.codeAdd">添加
                </Button>
            </router-link>
        </div>
        <div style="text-align: right;margin: 5px">
            <Page :total="total" @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator show-sizer
                  :page-size="pageSize"
                  show-total size="small"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "codeList",
        metaInfo: {
            title: '字典列表',
        },
        data() {
            return {
                columns: [

                    {title: '编号', key: 'id', align: 'center', width: '80px'},
                    {title: '字典KEY', key: 'codeKey', align: 'center'},
                    {title: '字典VALUE', key: 'codeValue', align: 'center'},
                    {title: '描述', key: 'content', align: 'center'},
                    {title: '修改时间', key: 'gmtModified', align: 'center'},
                    {
                        title: '操作', key: 'operate', align: 'center', render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.change(params.row)
                                        }
                                    },
                                    directives: [
                                        {
                                            name: 'has',
                                            value: this.$res.codeUpdate,
                                        }
                                    ],
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id)
                                        }
                                    },
                                    directives: [
                                        {
                                            name: 'has',
                                            value: this.$res.codeDelete,
                                        }
                                    ],
                                }, '删除')
                            ])
                        }
                    },
                ],
                // 数据类
                data1: [],
                total: 0, // 总数据大小
                pageSize: 10, // 页码大小
                page: 1,
                keyword: '',
            }
        },
        mounted: function () {
            this.getData()
        }
        ,
        methods: {
            // 修改当前页码
            pageChange: function (val) {
                this.page = val
                this.getData()
            }
            ,
            // 修改页码大小
            sizeChange: function (val) {
                this.pageSize = val
                this.getData()
            }
            ,
            // 获取数据
            getData: function () {
                this.$kit.ajaxGet(this.$res.codeList, {
                    page: this.current,
                    pageSize: this.pageSize,
                    keyword: this.keyword
                }, (res) => {
                    this.data1 = res.data.data.data
                    this.total = res.data.data.totalSize
                }, this)
            }
            ,
            change: function (row) {
                this.$Modal.confirm({
                    title: '修改字典对应值',
                    render: (h) => {
                        return ('div', [
                            h('Input', {
                                props: {
                                    value: row.codeValue,
                                    placeholder: '字典值',
                                    type:'textarea',
                                },
                                style: {
                                    marginTop: '20px'
                                },
                                on: {
                                    input: (val) => {
                                        row.codeValue = val
                                    }
                                }
                            }),
                        ])
                    },
                    onOk: () => {
                        this.$kit.ajaxPut(this.$res.codeUpdate, row, (res) => {
                            // 重新加载表格
                            this.getData()
                            this.$Message.success(res.data.msg)
                        })
                    },
                    onCancel: () => {
                        this.$Message.warning("取消操作")
                    }
                })
            },
            remove: function (id) {
                let param = {msg: "任务", id: id, permissionId: this.$res.codeDelete}
                this.$emit("remove", param, () => {
                    this.getData();
                })
            }

        }
    }
</script>

<style scoped>

</style>
